<template>
	<view>
		<!-- 搜索栏 -->
		<view class="search-box">
			<image v-if="showType" @click="tabShow = true" src="../../static/images/type.png" class="type"></image>
			<view @click="onToSearch" class="box">
				<text class="placeholder">请输入关键字查询</text>
				<!-- 				<view class="right"> -->
				<image class="search-img" src="../../static/images/search.png" />
				<!-- </view> -->
			</view>
			<!-- 历史记录 -->
			<image v-if="showHistory" @click="historicalRecords" src="/static/images/icon/log.png" class="history" />
		</view>
		<!-- 类型弹框 -->
		<view v-show="tabShow" @click="tabShow = false"
			style="width: 100vw;height: calc(100vh - var(--window-bottom));position: absolute;top: 0;right: 0;z-index: 100;background-color: rgba(0, 0, 0, 0.5);">
			<view
				style="width: 40vw;height: calc(100% - var(--status-bar-height));background-color: #ffffff;border-radius: 0 20rpx 20rpx 0;padding-top: var(--status-bar-height);float: right;">
				<scroll-view scroll-y style="height: 100%;" :scroll-top="tabScroll">
					<view v-for="(item,index) in tabs" :key="index" @click.stop="onTab(index)"
						:class="(index === tabIndex ? 'tab-selected' : 'tab') + ' scroll-item text-center'"
						:style="{'border-top-right-radius':index === 0 ? '20rpx' : '','border-bottom-right-radius':index === tabs.length - 1 ? '20rpx' : ''}">
						{{item.name}}
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {configData,configTypes,recommendVideos,typeVideos} from '@/api/home.js'
	export default {
		name: "MySearch",
		props: {
			showType: {
				type: Boolean,
				default: true
			},
			showHistory: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				tabShow: false,
				tabScroll: 0,
				topAdvertise: [],
				tabs: [],
				tabIndex: 0,
				bottomAdvertise: [],
			};
		},
		mounted() {
			this.doGetAdvertise();
			this.doGetTabs();
		},
		methods: {
			// 前往搜索页面
			onToSearch() {
				uni.navigateTo({
					url: "/pages/watchMovie/search"
				})
			},

			historicalRecords() {
				uni.navigateTo({
					url: "/pages/recommend/twoColumn?type=history"
				})
			},
			doGetAdvertise() {
				configData({type: 3}).then(res=>{
					this.topAdvertise = res.data.advertise.top || [];
					this.bottomAdvertise = res.data.advertise.bottom || {};
				})
			},
			// 获取类型数据
			doGetTabs() {
				configTypes().then(res => {
					this.tabs = [ ...res.data, {
						_id: "-1",
						name: "其他"
					}];
				
					this.doGetRecommendVideos();
				})
			},
			// 
			onTab(index, isRecommend) {
				if (isRecommend) {
					let tab = this.doGetTabName(index);
					if (tab.index === -1) {
						return;
					}
					index = tab.index;
				}
				const query = uni.createSelectorQuery().in(this);
				let that = this;
				this.tabIndex = index;
				query
					.selectAll(`.scroll-item`)
					.boundingClientRect(rect => {
						const windowHeight = uni.getSystemInfoSync().safeArea.height - 60 // 屏幕宽度
						let height = 0,
							tabScroll = 0;
						// 循环获取计算当前点击的标签项距离左侧的距离
						for (let i = 0; i < index; i++) {
							height += rect[i].height
						}
						// 当大于屏幕一半的宽度则滚动，否则就设置位置为0
						if (height > windowHeight / 2) {
							tabScroll = height + rect[index].height / 2 - windowHeight / 2
						} else {
							tabScroll = 0
						}
						that.tabScroll = tabScroll;
						that.tabShow = false;
						// 获取数据
						if (index !== 0) {
							that.page = 1;
							that.datas = [];
							that.count = 1;
							that.doGetTypeVideos();
						} else {
							that.doGetRecommendVideos();
						}
					}).exec()
			},
			// 获取推荐视频
			doGetRecommendVideos() {
				recommendVideos().then(res => {
					this.recommend = res.data || {};
					uni.stopPullDownRefresh();
				})
			},
			// 获取视频分类的名称
			doGetTabName(_id) {
				let name = "",
					index = -1;
				for (let i = 0; i < this.tabs.length; i++) {
					if (this.tabs[i]._id === _id) {
						index = i;
						name = this.tabs[i].name;
						break;
					}
				};
				return {
					name,
					index
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-selected {
		padding: 15rpx 30rpx;
		background: linear-gradient(rgb(16, 79, 252), rgb(255, 120, 160));
		/* border-radius: 20rpx; */
		color: white;
		font-weight: bold;
		white-space: nowrap;
	}

	.tab {
		padding: 15rpx 30rpx;
		white-space: nowrap;
	}

	.search-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// margin-bottom: 20rpx;

		.type {
			width: 60rpx;
			height: 60rpx;
			margin-bottom: 8rpx;
		}

		.box {
			height: 55rpx;
			border: 3rpx solid var(--thorui-color-pink);
			border-radius: 40rpx;
			display: flex;
			justify-content: space-between;
			line-height: 50rpx;
			padding: 0 20rpx 0rpx;
			// width: 560rpx;
			flex: 1;

			.placeholder {
				padding-top: 5rpx;
				color: #ccc;
			}
		}

		.history {
			width: 45rpx;
			height: 45rpx;
			margin: 0 0 0 10rpx;
		}

		// .right {
		// 	display: flex;
		// 	align-items: center;

		.search-img {
			width: 53rpx;
			height: 53rpx;
			// margin-top: 10rpx;
		}


		// }
	}
</style>